<template>
  <div class="batchpayment">
    <el-form :model="thequery" ref="thequery" size="mini" style="margin: 0 0 20px 10px">
      <div style="display: flex">
        <el-form-item label="审核开始时间" style="display: flex; margin: 0 20px 0 0">
          <el-date-picker type="date"
              v-model="thequery.reviewedTime"
              format="yyyy-MM-dd"
              placeholder="审核时间">
            </el-date-picker>
        </el-form-item>
         <el-form-item label="审核结束时间" style="display: flex; margin: 0 20px 0 0">
           <el-date-picker
              type="date"
              v-model="thequery.reviewedTimeEnd"
              format="yyyy-MM-dd"
              placeholder="结束时间">
            </el-date-picker>
        </el-form-item>
         <el-form-item label="订单号" style="display: flex; margin: 0 20px 0 0">
          <el-input v-model="thequery.orderId"></el-input>
         </el-form-item>
      </div>
      <div style="display: flex; margin: 20px 0 0 65%">
        <el-form-item style="margin: 0 20px 0 50px">
          <el-button type="primary" size="mini" @click="searchairPort">查询</el-button>
          <el-button type="primary" size="mini" @click="batchdispose">批量提交</el-button>
          <el-button type="primary" size="mini" @click="returnList">返回上一页</el-button>
        </el-form-item>
      </div>
    </el-form>
    <!-- 表格 -->
     <el-table
      :header-cell-style="{ color: '#fff', background: '#6090EC', fontSize: '11px', fontWeight: 'normal',}"
       :data="auxiliary" size="mini" border  stripe @select="clickselect">
       <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column label="申请人" prop="employeeIdApply"  width="90"></el-table-column>
      <el-table-column  label="审核时间"  prop="applyTime" ></el-table-column>
      <el-table-column  label="申请数量"  width="100" prop="applyNumber" >
      </el-table-column>
      <el-table-column label="订单类型" width="80" prop="orderTypeId"></el-table-column>
      <el-table-column label="客户信息" prop="customerName" width="90px">
      </el-table-column>
       <el-table-column label="退款方式" prop="refundmentType" width="120px">
      </el-table-column>
       <el-table-column label="订单号" prop="orderId">
      </el-table-column>
       <el-table-column label="汇款金额" prop="refundmentAmount" width="100px">
      </el-table-column>
      <el-table-column label="付款平台" width="150px" prop="plfkformName">
        <template slot-scope="scope">
              <template v-if="scope.row.plfkformName=='unionPayApp'">银联云闪付APP</template>
              <template v-if="scope.row.plfkformName=='unionPayWeChat'">银联小程序微信</template>
              <template v-if="scope.row.plfkformName=='huaXiaPay'">华夏付款平台</template>
              <template v-if="scope.row.plfkformName=='trafficBank'">交行付款平台</template>
              <template v-if="scope.row.plfkformName=='agricultureBank'">农业银行付款平台</template>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="110" prop="employee">
        <template slot-scope="scope">
          <el-button type="primary" @click="dealwithorder(scope.row)" size="mini">处理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 处理弹窗 -->
    <el-dialog title="退款确认" :visible.sync="dialogVisible" :close-on-click-modal="false" width="65%">
       <el-form :model="recordList" :rules="rulesList" ref="recordList"  class="demo-ruleForm" size="mini">
              <div style="display:flex;">
                <el-form-item label="退款类型"  style="display:flex;margin:0 20px 0 0" >
                       <el-input style="width:160px" :disabled="true" v-model="recordList.refundmentType"></el-input>
                </el-form-item>
                 <el-form-item label="退款金额"  style="display:flex;margin:0 20px 0 0">
                       <el-input style="width:160px" :disabled="true" v-model="recordList.refundmentAmount"></el-input>
                </el-form-item>
                 <el-form-item label="状态"  style="display:flex;margin:0 20px 0 0">
                       <el-input style="width:160px" :disabled="true" v-model="recordList.status"></el-input>
                </el-form-item>
              </div>
              <div style="display:flex; margin:15px 0 0 0">
                <el-form-item label="客户姓名"  style="display:flex;margin:0 20px 0 0">
                       <el-input style="width:160px" :disabled="true" v-model="recordList.customerName"></el-input>
                </el-form-item>
                 <el-form-item label="订单号"  style="display:flex;margin:0 20px 0 0">
                       <el-input style="width:175px" :disabled="true" v-model="recordList.orderId"></el-input>
                </el-form-item>
                 <el-form-item label="卡号"  style="display:flex;margin:0 20px 0 0">
                       <el-input style="width:160px" :disabled="true" v-model="recordList.cardNo"></el-input>
                </el-form-item>
              </div>
            <div style="display:flex; margin:15px 0 0 0">
                <el-form-item label="开户银行"  style="display:flex;margin:0 20px 0 0">
                       <el-input style="width:160px" :disabled="true" v-model="recordList.bankname"></el-input>
                </el-form-item>
                 <el-form-item label="开户城市"  style="display:flex;margin:0 20px 0 0">
                       <el-input style="width:163px" :disabled="true" v-model="recordList.bankCity"></el-input>
                </el-form-item>
                 <el-form-item label="持卡人"  style="display:flex;margin:0 20px 0 0">
                       <el-input style="width:160px" :disabled="true" v-model="recordList.cardOwner"></el-input>
                </el-form-item>
              </div>
              <div style="display:flex; margin:15px 0 0 0">
                <el-form-item label="收款日期"  style="display:flex;margin:0 20px 0 0">
                       <el-input style="width:160px" :disabled="true" v-model="recordList.collectionDate"></el-input>
                </el-form-item>
                 <el-form-item label="收款金额"  style="display:flex;margin:0 20px 0 0">
                       <el-input style="width:163px" :disabled="true" v-model="recordList.collectionAmount"></el-input>
                </el-form-item>
                 <el-form-item label="收款渠道"  style="display:flex;margin:0 20px 0 0">
                       <el-input style="width:160px"  :disabled="true" 
                       v-model="recordList.collectionType==' Wechat' ?'微信' :recordList.collectionType=='Alipay'?'支付宝' :recordList.collectionType=='UnionPay'?'银联' :recordList.collectionType=='UnionPayQRCode'?'银联二维码支付' :recordList.collectionType=='BankDebit'?'银行卡借记卡' :recordList.collectionType=='BankCredit'?'银行信用卡':recordList.collectionType=='UnionQRCodePay'?'银联二维码' :recordList.collectionType=='PhoneSoundPay'?'电话语音支付':'总办赠卡支付'">
                       </el-input>
                </el-form-item>
              </div>
              <div style="display:flex; margin:15px 0 0 0">
                <el-form-item label="退款银行"  style="display:flex;margin:0 20px 0 0">
                       <el-input style="width:160px" :disabled="true" v-model="recordList.refundBank"></el-input>
                </el-form-item>
                 <el-form-item label="发送短信"  style="display:flex;margin:0 20px 0 0">
                         <el-checkbox v-model="checked" @change="checkedchecked"></el-checkbox>
                </el-form-item>
                 <el-form-item label="手机号"  style="display:flex;margin:0 20px 0 0" v-if="checkedList==true" prop="customerPhone">
                       <el-input style="width:150px" :disabled="true"  v-model="recordList.customerPhone"></el-input>
                </el-form-item>
              </div>
               <div style="display:flex;margin:15px 0 20px 0" v-if="checkedList==true">
                    <el-form-item label="发送内容"  style="display:flex;margin:0 20px 0 0" prop="SMSContent">
                          <el-input type="textarea" style="width:500px" :rows="4"  v-model="recordList.SMSContent"></el-input>
                    </el-form-item>
               </div>
                <div style="display:flex;margin:15px 0 20px 0" >
                    <el-form-item label="备注"  style="display:flex;margin:0 20px 0 0">
                      {{recordList.refundmentDesc}}
                    </el-form-item>
                     <el-form-item   style="display:flex;margin:0 20px 0 0">
                          <el-input type="textarea" style="width:300px" :rows="2"  v-model="recordList.remark"></el-input>
                    </el-form-item>
                     <el-form-item   style="display:flex;margin:0 20px 0 0">
                      <el-checkbox v-model="special" @change="specialchecked">强制完成（特殊情况下使用）</el-checkbox>
                    </el-form-item>
               </div>
                 <el-form-item style="margin:0 0 0 40%">
                    <el-button type="primary" @click="recorsave('recordList')">退款</el-button>
                     <el-button type="primary" @click="refundfailure">退款失败</el-button>
                    <el-button type="primary" @click="dialogVisible=false">取消</el-button>
                </el-form-item>
            </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'batchpayment',
  data() { 
    return {
      refundmentId:0,
      // 表格点击时间
      clickselectList:[],
      // 强制完成
      special:false,
      // 发送短信
      checked:true,
      checkedList:true,
      // 处理弹窗校验
       rulesList:{
          customerPhone: [{ required: true, message: '情输入手机号', trigger: 'change' },],
          SMSContent: [{ required: true, message: '请输入发送内容', trigger: 'blur' },],
          // transactionSerialNumber: [{ required: true, message: '请输入交易流水号', trigger: 'blur' },],
      },
      // 弹窗
      recordList:{
        customerPhone:"",
        SMSContent:"",
      },
      dialogVisible:false,
      // 批次号
      batchNumber:0,
      auxiliary:[
        {
          AA:''
        }
      ],
      // 搜索条件
      thequery:{
       reviewedTime:"",
       reviewedTimeEnd:'',
       orderId:""
      },
      // 付款平台
      querySearch:[
       {
        label:'全部',
        value:'',
       },
       {
        label:'银联云闪付APP',
        value:'unionPayApp',
       },
       {
        label:'银联小程序微信',
        value:'unionPayWeChat',
       },
       {
        label:'华夏付款平台',
        value:'huaXiaPay',
       },
       {
        label:'交行付款平台',
        value:'trafficBank',
       },
       {
        label:'农业银行付款平台',
        value:'agricultureBank',
       },
   ],
    }
  },
  methods:{
    // 批量
    getisRefundConfirmbatch(){
      localStorage.setItem("isToken", true);
      this.$axios.getisRefundConfirm({
       refundmentIds: this.clickselectList
      }).then((res)=>{
        console.log(res)
        if(res.code=='200'){
          this.getbulkPayment()
           this.$message({
                message: res.msg,
                type: "success",
              });
        }
      })
    },
    // 确认
    getisRefundConfirmconfirm(){
      localStorage.setItem("isToken", true);
      this.$axios.getisRefundConfirm({
       refundmentId: this.recordList.refundmentId,
       refundmentIds:[0],
       status:'refunding',
       //  会员手机号
      customerPhone:this.recordList.customerPhone,
      sendContent:this.recordList.SMSContent,
      sendSMS:this.checkedList,
      }).then((res)=>{
        console.log(res)
        if(res.code=='200'){
          this.dialogVisible=false
           this.$message({
              message: '退款成功',
              type: 'success'
            });
            this.getbulkPayment()
        }else{
           this.$message({
            message: '操作失败，请核对信息！！！',
            type: 'warning'
          });
        }
      })
    },
    // 不退款
    getisRefundConfirmNorefund(){
      localStorage.setItem("isToken", true);
      this.$axios.getisRefundConfirm({
       refundmentId: this.recordList.refundmentId,
        refundmentIds:[0],
         status:'refundFailed',
      }).then((res)=>{
        this.getbulkPayment()
        console.log(res)
        if(res.code=='200'){
           this.dialogVisible=false
        }
      })
    },
    // 退款失败按钮
    refundfailure(){
      this.$confirm('确认退款失败吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.getisRefundConfirmNorefund()
          this.getbulkPayment()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });          
        });
     
    },
        // 查询按钮
    searchairPort(){
      this.getbulkPayment()
    },
    // 表格点击事件
    clickselect(row){
      console.log(row)
      this.clickselectList = row.map(item=>{
        return item.refundmentId
      })
      
      console.log(this.clickselectList)
    },
    // 强制完成点击事件
    specialchecked(){
      
    },
    // 发送短信点击事件
    checkedchecked(row){
      console.log(row)
      this.checkedList=row
      console.log(this.checkedList)
    },
    // 处理弹窗确认按钮
   recorsave(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
           this.getisRefundConfirmconfirm()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    // 返回上一页
    returnList(){
      this.$router.go(-1)
    },
    // 批量处理按钮
    batchdispose(){
      if(this.clickselectList.length<1){
         this.$message({
          message: '至少选择一条数据进行操作',
          type: 'warning'
        });
      }else{
         this.$confirm('确定批量操作次数据吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         this.getisRefundConfirmbatch()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });          
        });
      }
    },
    // 处理订单按钮
    dealwithorder(row){
      console.log(row)
      this.refundmentId=row.refundmentId
      this.dialogVisible=true
      this.getrefundConfirm()
    },
    // 确认退款详情
    getrefundConfirm(){
      this.$axios.getrefundConfirm({
        refundmentId:this.refundmentId
      }).then((res)=>{
        console.log(res)
        if(res.code=='200'){
          this.recordList=res.data         
        }
      })
    },
    // 查询列表数据
    getbulkPayment(){
      this.$axios.getbulkPayment({
        // 批次号
        batchNumber:this.batchNumber,
        reviewedTime:this.thequery.reviewedTime,
        reviewedTimeEnd:this.thequery.reviewedTimeEnd,
        orderId:this.thequery.orderId,
      }).then((res)=>{
        console.log(res)
        if(res.code=='200'){
          this.auxiliary=res.data
        }
      })
    },
        //跳出
        closeLoading() {
           this.tableLoading.close();
        },
      //进入
        showLoading() {
         this.tableLoading = this.$loading({
        text: "拼命加载数据中", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.4)", //遮罩层颜色
        target: document.querySelector("#table"), //loadin覆盖的dom元素节点
      });
    },
  },
  mounted() {
     this.batchNumber=this.$route.params.batchNumber
      console.log(this.batchNumber)
    this.getbulkPayment()
  },
 }
</script>

<style  scoped>
.batchpayment{
  margin: 20PX;
}
</style>